<template>
	<div>
	  <div class="title">热销推荐</div>
	  <ul>
	  	<router-link :to="'/detail/' + item.id" tag="li" class="item" v-for="item of list" :key="item.id">
	  		<div class="item-img-wrapper">
	  			<img  class="item-img " :src="item.imgUrl" />
	  		</div>
	  		<div class="item-info">
	  			<p class="item-title">{{item.title}}</p>
	  			<p class="item-desc">{{item.desc}}</p>
	  			<button class="item-button">查看详情</button>
	  		</div>
	  	</router-link>
	  </ul>
	</div>
</template>

<script>
	export default {
		name: 'HomeRecommend',
		props: {
			list: Array
		}
	}
</script>

<style lang="stylus" scoped="scoped">
@import '~styles/mixins.styl'
  .title
   margin-top:2px
   line-height: 40px
   background:#eee
   text-indent: 15px
   font-size:16px
  .item
   border-bottom:1px solid #eee
   height:93px
   overflow:hidden
   display:flex
   margin-left:10px
   .item-img
     width:88px
     height:88px
     padding:5px
   .item-info
     flex:1
     padding:5px
     .item-title
       ellipsis ()
       line-height:27px
       font-size:16px
     .item-desc
       ellipsis ()
       line-height:20px
       color:#ccc
     .item-button
       background:#f60
       color:#fff
       line-height:22px
       margin-top:4px
       border-radius:5px
  
</style>